<template>
    <!--
        isShowTitle:false,//是否显示标题
        isLeft:false,//是否显示左边编辑框
        isRight:false,//是否显示右边编辑框
        isRightSearch:false,//是否显示右边查询框
    -->
    <element-container :isShowTitle="true" :isLeft="true" isRight="true">
        <el-input
                placeholder="输入关键字进行过滤"
                v-model="filterText" slot="left-title">
        </el-input>

        <el-tree
                :data="treeData"
                show-checkbox
                node-key="id"
                :expand-on-click-node="true"
                :filter-node-method="filterNode"
                ref="tree"
                slot="left-main">
                      <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.label }}</span>
                            <span>
                              <el-button
                                      type="text"
                                      size="mini"
                                      @click="() => append(node,data)">
                                添加
                              </el-button>
                                <el-button
                                        type="text"
                                        size="mini"
                                        @click="() => loadNode(node)">
                                修改/查看
                              </el-button>
                              <el-button
                                      type="text"
                                      size="mini"
                                      @click="() => remove(node, data)">
                                删除
                              </el-button>
                            </span>
                      </span>
        </el-tree>

        <el-form ref="menu" :model="menuForm" :rules="rules" slot="right-main" v-loading="visible">
            <el-row>
                <el-form-item label="父级菜单" prop="parentName">
                    <el-input v-model="menuForm.parentName" :disabled="true"></el-input>
                </el-form-item>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="菜单名称" prop="name">
                        <el-input v-model="menuForm.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="菜单别名" prop="alias">
                        <el-input v-model="menuForm.alias"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="11">
                    <el-form-item label="菜单编码" prop="code">
                        <el-input v-model="menuForm.code"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="11">
                    <el-form-item label="菜单路由" prop="pathname">
                        <el-input v-model="menuForm.pathname"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <el-footer style="float:right" slot="right-main">
            <el-button type="primary" icon="el-icon-check" @click="saveData('menu')" title="保存"></el-button>
            <el-button @click="resetProductMes()" icon="el-icon-refresh" title="重置"></el-button>
        </el-footer>
    </element-container>
</template>
<script src="../assets/js/menu.js"></script>

